<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>检验线与标准管理</title>
    <%-- 全站样式 --%>
    <jsp:include page="/WEB-INF/jsps/template_style.jsp"></jsp:include>
    
    <style>
    tr th ,td {
        text-align: center;
    }
    </style>
</head>

<body class="page-body skin-navy">
<div class="page-container">
   <%--侧边栏 --%>
	<jsp:include page="/WEB-INF/jsps/sidebar.jsp"></jsp:include>
    
    <div class="main-content">
       <%--导航栏 --%>
		<jsp:include page="/WEB-INF/jsps/navbar.jsp"></jsp:include>
        <div class="page-title">
            <div class="title-env">
                <h1 class="title">检验线与标准管理</h1>
                <p class="description">
                    您可以在此页面上查看所有检验线和管理国际标准。
                </p>
            </div>
        </div>
        <div class="row">
            <!-- Tabbed panel 2 -->
            <div class="panel panel-default panel-tabs">
                <!-- Add class "collapsed" to minimize the panel -->
                <div class="panel-heading">
                    <h3 class="panel-title">检验线</h3>
                    <div class="panel-options">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#line" data-toggle="tab">检验线管理</a>
                        </li>
                        <li>
                            <a href="#standard" data-toggle="tab" onclick="listStandard()">国际标准管理</a>
                        </li>
                    </ul>
                </div>
                </div>  
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane active" id="line">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <table class="table table-bordered table-striped" id="example-2">
                                        <thead>
                                        <tr>
                                            <th>检验线组合编号</th>
                                            <th>用户姓名</th>
                                            <th>保存时间</th>
                                            <th>硬件类型</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody class="middle-align">
                                        <c:forEach items="${connectionList}" var="list">
                                        <tr>
                                            <td>${list.connectionAlgorithmID}</td>
                                            <td>${list.name}</td>
                                            <td>${list.connectionAlgorithmSaveTime}</td>
                                            <td>${list.hardwareName}</td>
                                            <td>
                                                <a href="" onclick="connectionAlgorithmInfo(${list.id},${list.userID},this)" class="btn btn-info btn-sm btn-icon icon-left" data-toggle="modal" data-target="#detail">
                                                    查看
                                                </a>

                                            </td>
                                        </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                         <div class="tab-pane" id="standard">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-offset-3">
                                        <div class="tocify-content">
                                            <div class="icon-collection">
                                                <div class="fontawesome-icon-list">
                                                    <div class="fa-hover pull-right">
                                                        <i class="fa fa-plus"></i>
                                                        <span><a href="javascript:;" onclick="jQuery('#add').modal('show', {backdrop: 'fade'});">添加标准</a></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <table class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>标准名称</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody class="middle-align" id="middle-align">
                                    
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                   </div>         
                </div>
            </div>
        </div>
                    	<%--页脚 --%>
		<jsp:include page="/WEB-INF/jsps/footer.jsp"></jsp:include>
        </div>

    </div>

<div class="page-loading-overlay">
    <div class="loader-2"></div>
</div>

<div class="modal fade" id="detail"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">详细信息</h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6">

                                <div class="form-group">
                                    <label for="field-1" class="control-label">检验线名称</label>

                                    <input type="text" class="form-control connectionAlgorithmName" id="field-1" name="connectionAlgorithmName" disabled/>
                                </div>
                            </div>
                            <div class="col-md-6">

                                <div class="form-group">
                                    <label for="field-1" class="control-label">被检测物</label>

                                    <input type="text" class="form-control detected" id="field-1" name="detected" disabled/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="field-1" class="control-label">检测内容</label>
                                    <input type="text" class="form-control detecte" id="field-1" name="detected" disabled/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="field-1" class="control-label">检验线描述</label>
                                    <textarea class="form-control autogrow connectionAlgorithmDescribe" name="plugin.description" disabled></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modified"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">修改标准</h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6">

                                <div class="form-group">
                                    <label for="field-1" class="control-label">编号</label>

                                    <input type="text" class="form-control" id="standardID" disabled/>
                                </div>
                            </div>
                            <div class="col-md-6">

                                <div class="form-group">
                                    <label for="field-1" class="control-label">标准名称</label>

                                    <input type="text" class="form-control" id="standardName"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" data-dismiss="modal" onclick="updateStandard()">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="add"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">添加标准</h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <!-- <div class="col-md-6">

                                <div class="form-group">
                                    <label for="field-1" class="control-label">编号</label>

                                    <input type="text" class="form-control" id="field-1" placeholder="xxxxxx"/>
                                </div>
                            </div> -->
                            <div class="col-md-6">

                                <div class="form-group">
                                    <label for="field-1" class="control-label">标准名称</label>

                                    <input type="text" class="form-control" id="standardname" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" onclick="addStandard()" id="submit">确定</button>
            </div>
        </div>
    </div>
</div>

<%-- 尾部内容 --%>
<jsp:include page="/WEB-INF/jsps/template_tail.jsp" />

<!-- Imported styles on this page -->
<link rel="stylesheet" href="assets/js/datatables/dataTables.bootstrap.css">
<!-- Imported scripts on this page -->
<script src="assets/js/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/js/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<!--Specific JS for this page-->
<script type="text/javascript">
    function connectionAlgorithmInfo(id, userid) {
    	$.ajax({
            type: 'POST',
            url: '/connectionAlgorithmInfo.do',
            dataType: 'json',
            data: {
                'id': id,
                'userid': userid
            },
            success: function(data) {
                $(".connectionAlgorithmName").val(data.datasConnectionAlgorithm[0].connectionAlgorithmName);
                $(".connectionAlgorithmSaveTime").val(data.datasConnectionAlgorithm[0].connectionAlgorithmSaveTime);
                $(".connectionAlgorithmDescribe").val(data.datasConnectionAlgorithm[0].connectionAlgorithmDescribe);
                $(".connectionAlgorithmState").val(data.datasConnectionAlgorithm[0].connectionAlgorithmState);
                $(".id").val(data.datasConnectionAlgorithm[0].id);
                
               
                $(".detected").val("");
                var datasDetectedNames=new Array();;
                $.each(data.datasDetected,function(n,value){
                    datasDetectedNames.push(value.detectedName);
                });
                $(".detected").val(datasDetectedNames.join(", "));
                $(".detecte").val("");
                var datasDetecteNames=new Array();;
                $.each(data.datasDetecte,function(n,value){
                    datasDetecteNames.push(value.name);
                });
                 $(".detecte").val(datasDetecteNames.join(", "));
                
                console.log(data);
                $('#look').modal({keyboard : false});
            }
        });
    }
    
    function listStandard(){
    	$.ajax({
            type: 'POST',
            url: '/listStandard.do',
            dataType: 'json',
            success: function(data) {
            	var resultDatas = data.listStandards;
            	$("#middle-align").html(""); // 将原来表格置空
                $.each(resultDatas,function(n,value){ // 进行for循环遍历
                    $("#middle-align").append("<tr>" +
                            "<td>" + value.id + "</td>" +
                            "<td>" + value.standardName + "</td>" +
                            "<td><a data-userID='4' class='userDetail btn btn-info btn-sm btn-icon icon-left' data-toggle='modal' data-target='#modified' onclick='showStandard("+value.id +","+"this"+")'>修改</a></td></tr>"); 
                 }); 
            }
        });
    }
    
    function showStandard(id,obj){
        
    	$('#standardID').val(id);
    	//找到table父元素
        var table=obj.parentNode.parentNode;
        //找到第二个td
        var Type=$(table).find('td')[1];
        //获取td标签的内容
        var standardName=$(Type).text();
        //赋值给input
        $('#standardName').val(standardName);
        
    }
    
    function updateStandard() {
    	
    	var id = $('#standardID').val();
    	var standardName = $('#standardName').val();
    	if(id.length == 0 || standardName.length==0) {
    		alert("信息不能为空！");
    	}else {
    		$.ajax({
                type: 'POST',
                url: '/updateStandard.do',
                dataType: 'json',
                data: {
                    'id': id,
                    'standardName': standardName
                },
                success: function(data) {
                    var result = data.result;
                    if(result == "success") {
                    	alert("修改成功！");
                    	listStandard(); // 调用js方法（显示所有信息）
                    }else {
                    	alert("修改失败！");
                        listStandard(); // 调用js方法（显示所有信息）
                    }
                }
            });
    	}
    }
    
    function addStandard() {
    	var standardName = $('#standardname').val();
        if(standardName.length==0) {
            alert("信息不能为空！");
        }else {
            $.ajax({
                type: 'POST',
                url: '/addStandard.do',
                dataType: 'json',
                data: {
                    'standardName': standardName
                },
                success: function(data) {
                    var result = data.result;
                    if(result == "success") {
                        alert("添加成功！");
                        $("#add").modal('hide'); // 让模态框消失
                        listStandard(); // 调用js方法（显示所有信息）
                    }else {
                        alert("添加失败！");
                        listStandard(); // 调用js方法（显示所有信息）
                    }
                }
            });
        }
    }
</script>
</body>

</html>